<template>
  <!-- 中国地图 -->
  <div class="map-ball">
    <div id="mapChart" class="map_echarts">
      <ECharts :option="option" :resize="false" />
    </div>
    <div class="c">
      <div class="r1"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import echarts, { ECOption } from "@/components/ECharts/config";
import ECharts from "@/components/ECharts/index.vue";
import mapJson from "../assets/js/cs.json";
import mapBg from "../assets/images/map.jpeg";
import PointBlue from "../assets/images/PointBlue.svg";
import PointYellow from "../assets/images/PointYellow.svg";
import PointGreen from "../assets/images/PointGreen.svg";
import PointRed from "../assets/images/PointRed.svg";

echarts.registerMap("cs", mapJson as Parameters<typeof echarts.registerMap>[1]);
const mapLineName = ref("cs");
const mapScale = ref(100);
const zoomVal = ref(1.18);

const data = [
  { name: "岳麓区", value: [112.78, 28.08, 100, 0.8, "up"] },
  { name: "芙蓉区", value: [113.05, 28.16, 90, -0.5, "down"] },
  { name: "天心区", value: [112.95, 28.03, 80, 1.2, "up"] },
  { name: "开福区", value: [112.98, 28.33, 70, -0.3, "down"] },
  { name: "雨花区", value: [113.11, 28.01, 60, 0.5, "up"] },
  { name: "望城区", value: [112.82, 28.36, 50, -0.2, "down"] },
  { name: "长沙县", value: [113.17, 28.35, 40, 0.3, "up"] },
  { name: "宁乡市", value: [112.41, 28.15, 30, -0.4, "down"] },
  { name: "浏阳市", value: [113.63, 28.14, 30, -0.4, "down"] }
];

const ScatterDot = [
  { name: "岳麓区", value: [112.78, 28.08, 0, "100%", "up"], unit: "%", status: "green" },
  { name: "芙蓉区", value: [113.05, 28.16, 2, "90%", "down"], unit: "%", status: "red" },
  { name: "天心区", value: [112.95, 28.03, 3, "80%", "up"], unit: "%", status: "green" },
  { name: "开福区", value: [112.98, 28.33, 4, "70%", "down"], unit: "%", status: "red" },
  { name: "雨花区", value: [113.11, 28.01, 5, "60%", "up"], unit: "%", status: "green" },
  { name: "望城区", value: [112.82, 28.36, 6, "50%", "down"], unit: "%", status: "red" },
  { name: "长沙县", value: [113.17, 28.35, 7, "40%", "up"], unit: "%", status: "green" },
  { name: "宁乡市", value: [112.41, 28.15, 8, "30%", "down"], unit: "%", status: "red" },
  { name: "浏阳市", value: [113.63, 28.14, 8, "30%", "down"], unit: "%", status: "red" }
];

const cityNameMap = {
  岳麓区: "岳麓区",
  芙蓉区: "芙蓉区",
  天心区: "天心区",
  开福区: "开福区",
  雨花区: "雨花区",
  望城区: "望城区",
  长沙县: "长沙县",
  宁乡市: "宁乡市",
  浏阳市: "浏阳市"
};

function generateBackgroundGeos() {
  const bgGeo = [] as any;
  for (let i = 0; i < 24; i++) {
    let itemStyle;
    if (i < 12) {
      itemStyle = {
        areaColor: "rgba(0,0,0,0)",
        borderWidth: 2,
        borderColor: "#1B9DF1",
        shadowBlur: 2,
        shadowColor: "#1B9DF1",
        shadowOffsetX: 0,
        shadowOffsetY: 2 * i,
        opacity: 1
      };
    } else if (i >= 12 && i < 18) {
      itemStyle = {
        areaColor: "rgba(0,0,0,0)",
        borderWidth: 1,
        borderColor: "#67BAF1",
        shadowBlur: 2,
        shadowColor: `rgba(2,189,241,${0.1 * i - 0.8})`,
        shadowOffsetX: 0,
        shadowOffsetY: 2 * i,
        opacity: 0.3
      };
    } else {
      itemStyle = {
        areaColor: "rgba(0,0,0,0)",
        borderWidth: 1,
        borderColor: "#67BAF1",
        shadowBlur: 2,
        shadowColor: `rgba(2,189,241,${1.0 - 0.03 * i})`,
        shadowOffsetX: 0,
        shadowOffsetY: 2 * i,
        opacity: 0.3
      };
    }

    bgGeo.push({
      map: mapLineName.value,
      name: "背景色" + i,
      zoom: zoomVal.value,
      layoutCenter: ["50%", "50%"],
      layoutSize: mapScale.value + "%",
      aspectScale: 1,
      itemStyle: itemStyle,
      silent: true,
      zlevel: 0
    });
  }

  return bgGeo;
}

const option: ECOption | any = {
  tooltip: {
    show: false,
    trigger: "item"
  },
  grid: {
    left: "0px",
    right: "80px",
    top: "10px",
    bottom: "10px"
  },
  geo: [
    {
      show: true,
      map: mapLineName.value,
      zoom: zoomVal.value,
      selectedMode: true,
      aspectScale: 1,
      layoutCenter: ["50%", "50%"],
      layoutSize: mapScale.value + "%",
      itemStyle: {
        areaColor: "rgba(0,0,0,0)",
        borderWidth: 0.5,
        borderColor: "#87CDFF"
      },
      // label: {
      //   color: "#fff",
      //   show: true,
      //   fontSize: 20
      // },
      emphasis: {
        label: {
          show: false
        },
        itemStyle: {
          areaColor: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(132,255,134,0.5)" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(132,255,134,0.30)" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          borderColor: "#13F616"
        }
      },
      select: {
        label: {
          show: false
        },
        itemStyle: {
          areaColor: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(255,246,132,0.50)" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(255,244,103,0.30)" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          borderColor: "#FFF467"
        }
      },
      zlevel: 24
    },
    ...generateBackgroundGeos(),
    {
      show: true,
      map: mapLineName.value,
      zoom: zoomVal.value,
      zlevel: 2,
      aspectScale: 1,
      layoutCenter: ["50%", "50%"],
      layoutSize: mapScale.value + "%",
      roam: false,
      silent: true,
      itemStyle: {
        areaColor: {
          image: mapBg, //
          repeat: "repeat" // // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
        }
      }
    },
    {
      show: true,
      map: mapLineName.value,
      zoom: zoomVal.value,
      zlevel: 3,
      aspectScale: 1,
      layoutCenter: ["50%", "50%"],
      layoutSize: mapScale.value + "%",
      roam: false,
      silent: true,
      itemStyle: {
        borderWidth: 2,
        borderColor: "#8FE3FF",
        opacity: 1,
        shadowBlur: 14,
        shadowColor: "#00BBFF",
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        areaColor: {
          type: "radial",
          x: 0.5,
          y: 0.5,
          r: 0.6,
          colorStops: [
            {
              offset: 0.6,
              color: "rgba(6,62,142,0)" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(0, 122, 250, .3)" // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      }
    }
  ],
  series: [
    {
      type: "map",
      map: "map",
      geoIndex: 0,
      label: {
        show: false
      },
      data: data.map(item => ({
        name: item.name,
        value: item.value
      })),
      tooltip: {
        show: true,
        trigger: "item",
        triggerOn: "mousemove|click",
        enterable: true,
        backgroundColor: "rgba(2,50,101,0.8)",
        textStyle: {
          color: "#fff",
          fontSize: 20
        },
        formatter: function (param) {
          if (param.data && param.data.value && param.data.value.length >= 5) {
            let value = param.data.value;
            let img = "";
            if (value[4] === "up") {
              img = '<i class="ml4 arrowUp" ></i>';
            } else if (value[4] === "down") {
              img = '<i class="ml4 arrowDown" ></i>';
            }
            return (
              '<div style="color: #fff">' +
              param.data.name +
              "<br/>环比：" +
              value[3] +
              " PP " +
              img +
              "<br/>环比排名：" +
              value[2] +
              "</div>"
            );
          }
          return "";
        }
      },
      silent: true
    },
    {
      name: "地市名称",
      type: "scatter",
      coordinateSystem: "geo",
      geoIndex: 0,
      symbolOffset: [10, -11],
      symbol: function (param) {
        let imgUrl = "image://" + PointBlue;
        if (param && param.length > 3) {
          if (param[2] === 0) {
            imgUrl = "image://" + PointYellow;
          } else if (param[2] === 1) {
            imgUrl = "image://" + PointGreen;
          } else if (param[2] === 2) {
            imgUrl = "image://" + PointRed;
          }
        }
        return imgUrl;
      },
      symbolSize: [30, 22],
      label: {
        show: true,
        align: "center",
        formatter: function (param: any) {
          let cityLabel = param.data.name;
          if (cityNameMap[param.data.name]) {
            cityLabel = `{data|${param.value[2]}${param.data.unit}}\n{name|${cityNameMap[param.data.name]}}`;
          }
          return cityLabel;
        },
        rich: {
          data: {
            fontFamily: "futura",
            fontWeight: "bold",
            fontSize: 20,
            color: "#00FF92",
            padding: [0, 0, 30, 0]
          },
          name: {
            color: "#ffffff",
            fontWeight: "bold",
            fontSize: 20,
            fontFamily: "YousheBiaoriHei,优设标题黑"
          }
        },
        position: "inside",
        offset: [0, 0]
      },
      itemStyle: {
        color: "rgba(0,0,0,0)"
      },
      data: ScatterDot,
      zlevel: 24
    }
  ]
};
</script>

<style lang="scss" scoped>
.map_echarts {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
}
.map-ball {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1000px;
  height: 800px;
  transform: translate(-50%, -50%);
  perspective: 500px; /* 设置透视距离 */
  img {
    width: 500px;
    height: 500px;
  }
  .c {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 908px;
    height: 908px;
    margin-top: -454px;
    margin-left: -454px;
    transform: rotateX(45deg) scale(1.2, 1.1) translateY(-192px);
  }
  .r1 {
    display: inline-block;
    width: 908px;
    height: 908px;
    content: "";
    background: url("../assets/images/Chart-BG-Disk.svg") center no-repeat;
    animation: turn 20s linear infinite;
  }

  @keyframes turn {
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(-40deg);
    }
    50% {
      transform: rotate(0deg);
    }
    75% {
      transform: rotate(40deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
}
</style>
